<template>
  <div class="bg flex-column_center">
    <h1 class="name an mb2">yiyue</h1>
    <p class="description an">做自己喜欢的事情...</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'background',
  props: {
  },
  setup (props) {
  }
})
</script>

<style scoped>
.bg {
  background: url('../assets/banner.png') center center / cover no-repeat;
  flex-basis: 23vw;
  height: 27vw;
  text-align: center;
  overflow: hidden;
  color: var(--text-color-white);
}
.an {
  transition: all 0.25s;
  transform: translateY(0);
  transition-delay: 0.16s;
  opacity: 1;
}
.name {
  font-weight: 500;
  /* margin: 7rem auto 1.8rem; */
  font-size: 2.5rem;
}
.description {
  font-size: 1.6rem;
  line-height: 1.3;
}
h1 {
  color: #fff;
}
</style>
